<template>
  <div class="product-comment">
    <!-- 评价头部：显示总体评分和评价统计 -->
    <div class="comment-header">
      <h3>用户评价</h3>
      <div class="comment-summary">
        <!-- 总体评分展示 -->
        <div class="overall-rating">
          <span class="rating-score">{{ statistics.averageRating }}</span>
          <div class="rating-stars">
            <i class="el-icon-star-on" v-for="i in 5" :key="i"></i>
          </div>
          <span class="rating-count"
            >共 {{ statistics.totalCount }} 条评价</span
          >
        </div>
        <!-- 评价类型标签 -->
        <div class="rating-tags">
          <span
            class="tag"
            :class="{ active: currentType === 'all' }"
            @click="changeType('all')"
            >全部 ({{ statistics.totalCount }})</span
          >
          <span
            class="tag"
            :class="{ active: currentType === 'good' }"
            @click="changeType('good')"
            >好评 ({{ statistics.goodCount }})</span
          >
          <span
            class="tag"
            :class="{ active: currentType === 'medium' }"
            @click="changeType('medium')"
            >中评 ({{ statistics.mediumCount }})</span
          >
          <span
            class="tag"
            :class="{ active: currentType === 'bad' }"
            @click="changeType('bad')"
            >差评 ({{ statistics.badCount }})</span
          >
          <span
            class="tag"
            :class="{ active: currentType === 'hasImage' }"
            @click="changeType('hasImage')"
            >有图 ({{ statistics.imageCount }})</span
          >
        </div>
      </div>
    </div>

    <!-- 评价列表 -->
    <div class="comment-list" v-loading="loading">
      <!-- 无评价时显示提示 -->
      <div v-if="comments.length === 0" class="empty-comment">暂无评价</div>
      <!-- 评价项 -->
      <div
        class="comment-item"
        v-for="(comment, index) in comments"
        :key="index"
      >
        <!-- 用户信息 -->
        <div class="user-info">
          <img :src="comment.avatar" class="user-avatar" />
          <span class="username">{{ comment.username }}</span>
        </div>
        <!-- 评价内容 -->
        <div class="comment-content">
          <!-- 评分 -->
          <div class="rating">
            <i class="el-icon-star-on" v-for="i in comment.score" :key="i"></i>
          </div>
          <!-- 评价文本 -->
          <p class="comment-text">{{ comment.content }}</p>
          <!-- 评价图片 -->
          <div
            class="comment-images"
            v-if="comment.images && comment.images.length"
          >
            <el-image
              v-for="(img, imgIndex) in comment.images"
              :key="imgIndex"
              :src="img"
              :preview-src-list="comment.images"
              fit="cover"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <!-- 评价底部信息 -->
          <div class="comment-footer">
            <span class="comment-time">{{ comment.createTime }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页组件 -->
    <div class="pagination" v-if="total > 0">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
/**
 * 商品评价组件
 * 功能：
 * 1. 展示商品评价列表
 * 2. 支持评价类型筛选（全部、好评、中评、差评、有图）
 * 3. 支持分页加载
 * 4. 支持图片预览
 */
export default {
  name: "ProductComment",
  props: {
    // 商品ID
    productId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      loading: false, // 加载状态
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      total: 0, // 总评价数
      currentType: "all", // 当前评价类型
      // 评价统计数据
      statistics: {
        totalCount: 0, // 总评价数
        goodCount: 0, // 好评数
        mediumCount: 0, // 中评数
        badCount: 0, // 差评数
        imageCount: 0, // 有图评价数
        averageRating: 0, // 平均评分
      },
      comments: [], // 评价列表
    };
  },
  created() {
    // 组件创建时加载评价数据
    this.fetchComments();
  },
  activated() {
    // 当组件被激活时重新加载数据
    this.currentPage = 1;
    this.currentType = "all";
    this.fetchComments();
  },
  methods: {
    /**
     * 获取评价列表
     */
    async fetchComments() {
      this.loading = true;
      try {
        const res = await this.$axios.post("/api/comment/product", {
          productId: this.productId,
          page: this.currentPage,
          pageSize: this.pageSize,
          type: this.currentType,
        });

        if (res.data.code === "001") {
          const { list, total, statistics } = res.data.data;
          this.comments = list;
          this.total = total;
          this.statistics = statistics;
        } else {
          this.$message.error(res.data.msg);
        }
      } catch (error) {
        this.$message.error("获取评价失败");
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
    /**
     * 切换评价类型
     * @param {string} type - 评价类型
     */
    changeType(type) {
      this.currentType = type;
      this.currentPage = 1;
      this.fetchComments();
    },
    /**
     * 处理页码变化
     * @param {number} page - 新的页码
     */
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchComments();
    },
  },
};
</script>

<style scoped>
/* 组件容器 */
.product-comment {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
}

/* 评价头部样式 */
.comment-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.comment-header h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

/* 评价统计样式 */
.comment-summary {
  display: flex;
  align-items: center;
}

.overall-rating {
  text-align: center;
  margin-right: 40px;
}

.rating-score {
  font-size: 24px;
  color: #ff6700;
  font-weight: bold;
}

.rating-stars {
  margin: 5px 0;
}

.rating-stars i {
  color: #ff6700;
  margin: 0 2px;
}

.rating-count {
  color: #999;
  font-size: 12px;
}

/* 评价类型标签样式 */
.rating-tags {
  flex: 1;
}

.tag {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 10px 10px 0;
  background-color: #f5f5f5;
  border-radius: 15px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.tag:hover {
  background-color: #ff6700;
  color: #fff;
}

.tag.active {
  background-color: #ff6700;
  color: #fff;
}

/* 评价列表样式 */
.comment-list {
  margin-top: 20px;
}

.comment-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  color: #333;
  font-size: 14px;
}

/* 评价内容样式 */
.comment-content {
  margin-left: 50px;
}

.rating {
  margin-bottom: 10px;
}

.rating i {
  color: #ff6700;
  margin-right: 2px;
}

.comment-text {
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* 评价图片样式 */
.comment-images {
  margin: 10px 0;
}

.comment-images .el-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  border-radius: 4px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 20px;
}

/* 评价底部信息样式 */
.comment-footer {
  color: #999;
  font-size: 12px;
  margin-top: 10px;
}

.comment-time {
  margin-right: 20px;
}

/* 空评价提示样式 */
.empty-comment {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 14px;
}

/* 分页样式 */
.pagination {
  margin-top: 20px;
  text-align: center;
}
</style> 